<template>
  <view class="container">
    <!-- 使用 view 组件显示订单信息 -->
    <view 
      v-for="order in orders" 
      :key="order.id"
      class="order-card"
    >
      <!-- 显示订单时间 -->
      <view class="order-time">{{ formatDate(order.orderTime) }}</view>
      
      <!-- 出发地点和结束地点 -->
      <view class="location">
        <view class="start-location">出发地点：{{ order.startLocation }}</view>
        <view class="end-location">结束地点：{{ order.endLocation }}</view>
      </view>

      <!-- 司机信息 -->
      <view class="driver-info">
        <!-- 司机头像 -->
        <image :src="order.driverAvatar" class="driver-avatar" />
        <view class="driver-details">
          <view class="driver-name">姓名：{{ order.driverName }}</view>
          <view class="driver-car">车牌号：{{ order.carPlate }}</view>
        </view>
      </view>

      <!-- 评分部分 -->
      <view class="rating-section">
        <view class="rating-stars">
          <view 
            v-for="star in 5" 
            :key="star" 
            :class="['star', { 'active': star <= order.rating && !order.isReviewed }]"
            @click="updateRating(order.id, star)"
            :style="{ cursor: order.isReviewed ? 'not-allowed' : 'pointer' }"
          ></view>
        </view>
        <view class="rating-text">{{ order.rating }}星</view>
      </view>

      <!-- 确定按钮 -->
      <view class="confirm-button">
        <button 
          v-if="!order.isReviewed" 
          @click="confirmReview(order.id)"
        >
          确定
        </button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      orders: [
        {
          id: 1,
          orderTime: '2024-09-05T08:30:00',
          startLocation: '淦',
          endLocation: '淦',
          driverAvatar: '/static/images/1.jpg',
          driverName: '张师傅',
          carPlate: '闽F12345',
          rating: 1,
          isReviewed: false
        },
        {
          id: 2,
          orderTime: '2024-09-05T09:00:00',
          startLocation: '上海市浦东新区',
          endLocation: '上海市静安区',
          driverAvatar: '/static/images/1.jpg',
          driverName: '李师傅',
          carPlate: '沪B67890',
          rating: 5,
          isReviewed: false
        }
      ]
    };
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${hours}:${minutes}`;
    },
    updateRating(orderId, newRating) {
      const order = this.orders.find(o => o.id === orderId);
      if (order && !order.isReviewed) {
        order.rating = newRating;
      }
    },
    confirmReview(orderId) {
      uni.showModal({
        title: '确认评价',
        content: '确认提交评价吗？',
        success: (res) => {
          if (res.confirm) {
            const order = this.orders.find(o => o.id === orderId);
            if (order) {
              order.isReviewed = true; // 标记为已评价
              uni.showToast({
                title: '评价已提交',
                icon: 'success'
              });
            }
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.container {
  padding: 20px;
}

.order-card {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #fff;
  position: relative;
}

.order-time {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.location {
  margin: 10px 0;
}

.start-location, .end-location {
  font-size: 16px;
  color: #333;
}

.driver-info {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.driver-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.driver-details {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.driver-name {
  font-size: 16px;
  color: #333;
}

.driver-car {
  font-size: 14px;
  color: #666;
}

.rating-section {
  margin-top: 10px;
}

.rating-stars {
  display: flex;
}

.star {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  margin-right: 2px;
}

.star.active {
  background-color: #f90;
}

.rating-text {
  font-size: 16px;
  color: #333;
  margin-top: 5px;
}

.confirm-button {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

button {
  background-color: #007aff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>
